<template>

    <div>
        <p>水果列表</p>
        <ul>
            <li v-for="(p, index) of list" :key="p.id">
                水果编号：{{ p.id }}---水果名称:{{ p.name }}---详细信息:{{ p.xin }}
            </li>
        </ul>

    </div>
</template>


<script setup>
import { reactive } from 'vue';

const list = reactive([
    { id: '1', name: '水果', xin: '苹果汁水丰富，可以生津止渴' },
    { id: '2', name: '柠檬', xin: '柠檬具有生津止渴，化痰止咳的功效' }
])

</script>